import { Component } from 'react'
import { ConfigContext, versionPathOperation } from '@/utils';
import { Dropdown, Button, Switch } from 'antd'
import { Link } from 'react-router-dom'
import s from "./index.module.less";

const indexScene = (Components: any, componentsConfig: any) => {

  return class Index extends Component<any, any> {
    constructor(props) {
      super(props);
      this.state = {
        version: versionPathOperation.get('version') || '1',
        cur: ''
      }
    }

    render() {
      const items: any = [
        {
          key: '1',
          label: (
            <span className='reload' onClick={() => {
              location.reload()
            }}>刷新当前页面</span>
          ),
        },
        // {
        //   key: '2',
        //   label: (
        //     <a
        //       href={window.api.getLocalMirserverPath('rar')}
        //       target="downloadFile"
        //       className='reload'
        //       download
        //     >
        //       下载搭配的配置步骤
        //     </a>
        //   ),
        // },
        {
          key: '3',
          label: (
            <a
              // 这个资源目前放在蓝奏云上管理
              href='https://wwb.lanzouj.com/ig09h1x4e4ah'
              target="_blank"
              className='reload'
            >
              下载开区助手+版本gom
            </a>
          ),
        },
        {
          key: '3_1',
          label: (
            <Button size='small' onClick={() => {
              window.api.openMirserver('开区检查')
            }}>
              打开开区检查
            </Button>
          ),
        },
        {
          key: '4',
          label: (
            <Button size='small' onClick={() => {
              window.api.openApp('bianliang')
            }}>
              打开苹果变量查询软件
            </Button>
          ),
        },
        // {
        //   key: '4_1',
        //   label: (
        //     <Button size='small' onClick={() => {
        //       window.api.openApp('bl')
        //     }}>
        //       打开变量查询软件
        //     </Button>
        //   ),
        // },
        {
          key: '5',
          label: (
            <Button size='small' onClick={() => {
              window.api.openApp('wuji')
            }}>
              打开无极数据库
            </Button>
          ),
        },
        {
          key: '6',
          label: (
            <Button size='small' onClick={() => {
              window.api.openApp('afr')
            }}>
              打开AFR搜索
            </Button>
          ),
        },
        {
          key: '7',
          label: (
            <Button size='small' onClick={() => {
              window.api.openApp('bianma')
            }}>
              打开编码转换器
            </Button>
          ),
        },
      ];

      const linkList = [
        {
          to: '/Weiduan',
          title: '微端',
        },
        {
          to: '/Index',
          title: '版本',
        },
        {
          to: this.state.version === '2' ? '/bianliang/old' : '/bianliang/new',
          title: this.state.version === '2' ? '老版-变量替换' : '变量替换',
        },
        {
          to: this.state.version === '2' ? '/Huiyuan/old' : '/Huiyuan/new',
          title: this.state.version === '2' ? '老-37w通区脚本' : '37w通区脚本',
        },
        {
          to: '/jiaoben',
          title: '一些通用脚本',
        },
        // {
        //   to: '/Tihuan',
        //   title: '文本替换',
        // },
        {
          to: '/fileTH',
          title: '修改的文件批量下发',
        },
        {
          to: '/iframe/gom',
          title: 'GOM文档',
        },
        {
          to: '/iframe/esp',
          title: 'ESP-B文档',
        },
      ]
      
      return (
        <ConfigContext.Provider value={componentsConfig}>
          <div className={s.luyou}>
            
            <div className={s.switch}>
              <Switch
                checkedChildren="新版本"
                unCheckedChildren="老版本"
                value={this.state.version === '1'}
                onChange={e => {
                  this.setState({
                    version: e ? "1" : "2",
                  })
                  versionPathOperation.save('version', e ? "1" : "2")
                  location.href = '#/Index'
                }}
              />
            </div>

            {
              linkList.map(item => {
                let hash = location.hash || '/Weiduan'
                return (
                  <Link
                    to={item.to}
                    style={{ color: hash.includes(item.to) ? '#1677ff' : '' }}
                    key={item.to}
                    onClick={() => {
                      this.setState({
                        cur: item.to
                      })
                    }}
                  >
                    { item.title }
                  </Link>
                )
              })
            }

            <div className={s.href}>
              <Dropdown menu={{ items }}>
                <Button type='link'>更多</Button>
              </Dropdown>
            </div>
          </div>
          <Components />
        </ConfigContext.Provider>
      );
    }
  }
}

const index = (Components?: any, componentsConfig?: any) => {
  return indexScene(Components, componentsConfig)
}

export default index